<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="changeData">{{ count }}</button>
    {{ this.isLogin }}
  </div>
</template>

<script>
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

// const store = new Vuex.Store({
//   state: {
//     count: 3
//   }
// });

import { mapState } from "vuex";

export default {
  name: "about",
  data() {
    return {
      isLogin: 0
    };
  },
  // computed: mapState([
  //   'count'
  // ]),
  //...mapMutations  'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
  //...mapGetters  // 使用对象展开运算符将 getter 混入 computed 对象中
  //...mapState    count: state => state.count,
  //...mapActions  'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
  computed: {
    ...mapState({
      count: state => state.count + 1
    })
  },
  // computed: mapState({
  // count: state => state.count,
  // countAlias: "count",
  // countPlusLocalState(state) {
  //   return state.count + 3;
  // }
  // }),
  methods: {
    changeData() {
      alert(this.$store.state.count);
    }
  }
};
</script>
